<template>
  <div class="reporting-sub">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span class="card-title">上报管理-县级用户</span>
      </div>
      <div class="rep-top">
        <div class="rep-l">
          <el-select v-model="selectValue" placeholder="请选择" size="small">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-input
              size="small"
              placeholder="请输入区域名称"
              v-model="searcherValue">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="search" style="cursor: pointer"></i>
          </el-input>
        </div>
        <div class="rep-l">
          <el-button size="small" type="primary" plain>批量取消县级上报</el-button>
          <el-button size="small" type="primary" plain>批量县级上报</el-button>
          <el-button size="small" type="primary" plain>批量取消市级审核</el-button>
          <el-button size="small" type="primary" plain>批量市级审核</el-button>
        </div>
      </div>
      <el-table
          @selection-change="handleSelectionChange"
          size="small"
          stripe
          :data="data"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            align="center"
            prop="areaName"
            label="区划名称">
        </el-table-column>
        <el-table-column
            align="center"
            prop="areaCode"
            label="区划代码">
        </el-table-column>
        <el-table-column
            align="center"
            prop="confirm"
            label="县界确认">
          <template slot-scope="scope">
           <el-switch  v-model="scope.row.confirm" :disabled="true"  inactive-color="#ff4949" active-color="#34a58b" active-value="1" inactive-value="0"/>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="countyReport"
            label="县级上报">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.countyReport" :disabled="true" inactive-color="#ff4949" active-color="#34a58b" active-value="1" inactive-value="0"/>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="cityApproval"
            label="市级审核">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.cityApproval"  :disabled="true"  inactive-color="#ff4949" @change="countyApprovalHandler(scope.row,$event)" active-color="#34a58b" active-value="1" inactive-value="0"/>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="cityReport"
            label="市级上报">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.cityReport" :disabled="true" inactive-color="#ff4949"  active-color="#34a58b" active-value="1" inactive-value="0"/>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="provinceApproval"
            label="省级审核">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.provinceApproval"  @change="provinceApprovalHandler(scope.row,$event)"   inactive-color="#ff4949" active-color="#34a58b" active-value="1" inactive-value="0"/>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Prop} from 'vue-property-decorator';
import {toApproval} from '@/api/regionReport';
@Component
export default class ReportingCountyUser extends Vue {

  @Prop() private  data!:any;
  @Prop() private  workId!:any;
  private selectValue = '';
  private searcherValue = '';
  private options = [{
    value: '',
    label: '全部'
  }];


  search() {
    console.log(this.searcherValue);
  }

  handleSelectionChange(value){
    console.log(value);
  }


  provinceApprovalHandler(data, st){

  const oldSt = (st === '1')? '0':'1';
   //进行审批
   toApproval({id:data.id,approvalStatus:st}).then((res:any) =>{
       if(res && res.data) {
           if(res.data.code == 500){
             this.$message.error(res.msg);
             data.provinceApproval = oldSt;
           }else{
            data.provinceApproval = st;
             this.$message.success(res.msg);
           }
           (this as any).$bus.$emit('taskChangedHandler',this.workId);
       }
     }).catch(e =>{
      data.provinceApproval = oldSt;
       console.error(e);
     })
 }

  mounted(){

    this.data.forEach((dt:any) =>{
      this.options.push({value:dt.id,label:dt.areaName})
    })
  }
}
</script>
<style lang="scss" scoped>
.reporting-sub {
  .rep-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .rep-l {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }
}
</style>
